<template>
	<div class="component-fieldbox" :style="field.width!=0?'width:'+field.width+'px':''" :fieldname="field.vModel" :fieldvalue="data[field.vModel]">
		<f2bpm-label v-if="field.ctrType=='extend_label'||field.ctrType=='extend_custhtml'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-label>
		<f2bpm-textbox v-if="field.ctrType=='text'||field.ctrType=='extend_textbox'||field.ctrType=='textarea'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-textbox>
		<f2bpm-switch v-else-if="field.ctrType=='switch'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-switch>
		<f2bpm-steps v-else-if="field.ctrType=='steps'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-steps>
		<f2bpm-radio v-else-if="field.ctrType=='radio'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-radio>
		<f2bpm-checkbox v-else-if="field.ctrType=='checkbox'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-checkbox>
		<f2bpm-select v-else-if="field.ctrType=='select'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-select>
		<f2bpm-droptree v-else-if="field.ctrType=='droptree'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-droptree>
		<f2bpm-datetime v-else-if="field.ctrType=='datetime'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-datetime>
		<f2bpm-button v-else-if="field.ctrType=='button'||field.ctrType=='extend_button'||field.ctrType=='extend_tabtoolbar'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-button>
		<iframe v-else-if="field.ctrType=='extend_iframe'" :src="field.src" :id="field.id" class="extend-iframe" :style="field.style" frameborder="0" :iframesrc="field.src" :iframeheight="field.height" scrolling="yes" width="100%" :height="field.height"></iframe>
		<f2bpm-file v-else-if="field.ctrType=='file'||field.ctrType=='extend_file'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-file>
		<f2bpm-picture v-else-if="field.ctrType=='picture'||field.ctrType=='extend_picture'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-picture>
		<f2bpm-serialnum v-else-if="field.ctrType=='serialnum'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue">
		</f2bpm-serialnum>
		<f2bpm-autocompleter v-else-if="field.ctrType=='autocompleter'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-autocompleter>
		<f2bpm-handsign v-else-if="field.ctrType=='handsign'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-handsign>
		<f2bpm-hyperlink v-else-if="field.ctrType=='hyperlink'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-hyperlink>
		<f2bpm-qrcode v-else-if="field.ctrType=='qrcode'" :rowindex="rowindex" :colindex="colindex" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-qrcode>
		<f2bpm-cascselect v-else-if="field.ctrType=='cascselect'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-cascselect>
		<f2bpm-stamp v-else-if="field.ctrType=='stamp'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-stamp>
		<f2bpm-richeditor v-else-if="field.ctrType=='richeditor'" :dataself="data" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-richeditor>
		<f2bpm-selector v-else-if="field.ctrType=='selector'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-selector>
		<f2bpm-customdialog v-else-if="field.ctrType=='customdialog'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-customdialog>
		<f2bpm-map-address v-else-if="field.ctrType=='mapAddress'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-map-address>
		<f2bpm-mobilesubtable :key="subtableKey" v-else-if="field.ctrType=='subtable'" :field="field" :fieldvalue="data[field.vModel]" @updatevalue="updateFieldValue" @appendfieldvalue="appendFieldValue">
		</f2bpm-mobilesubtable>
	</div>
</template>
<script>
	import f2bpmButton from '@/pages/components/onlineForm/f2bpm-button.vue'
	import f2bpmCascselect from '@/pages/components/onlineForm/f2bpm-cascselect.vue'
	import f2bpmCheckbox from '@/pages/components/onlineForm/f2bpm-checkbox.vue'
	import f2bpmDatetime from '@/pages/components/onlineForm/f2bpm-datetime.vue'
	import f2bpmFile from '@/pages/components/onlineForm/f2bpm-file.vue'
	import f2bpmHandsign from '@/pages/components/onlineForm/f2bpm-handsign.vue'
	import f2bpmHyperlink from '@/pages/components/onlineForm/f2bpm-hyperlink.vue'
	import f2bpmPicture from '@/pages/components/onlineForm/f2bpm-picture.vue'
	import f2bpmRadio from '@/pages/components/onlineForm/f2bpm-radio.vue'
	import f2bpmRicheditor from '@/pages/components/onlineForm/f2bpm-richeditor.vue'
	import f2bpmSelect from '@/pages/components/onlineForm/f2bpm-select.vue'
	import f2bpmSelector from '@/pages/components/onlineForm/f2bpm-selector.vue'
	import f2bpmSerialnum from '@/pages/components/onlineForm/f2bpm-serialnum.vue'
	import f2bpmStamp from '@/pages/components/onlineForm/f2bpm-stamp.vue'
	import f2bpmLabel from '@/pages/components/onlineForm/f2bpm-label.vue'
	import f2bpmTextbox from '@/pages/components/onlineForm/f2bpm-textbox.vue'
	import f2bpmCustomdialog from '@/pages/components/onlineForm/f2bpm-customdialog.vue'
	import f2bpmAutocompleter from '@/pages/components/onlineForm/f2bpm-autocompleter.vue'
	import f2bpmMobilesubtable from '@/pages/components/onlineForm/f2bpm-mobilesubtable.vue'
	import f2bpmDroptree from '@/pages/components/onlineForm/f2bpm-droptree.vue'
	import f2bpmMapAddress from '@/pages/components/onlineForm/f2bpm-map-address.vue'
	import f2bpmSteps from '@/pages/components/onlineForm/f2bpm-steps.vue'
	import f2bpmSwitch from '@/pages/components/onlineForm/f2bpm-switch';
	import f2bpmQrcode from '@/pages/components/onlineForm/f2bpm-qrcode.vue';
	export default {
		name: "f2bpm-onlineformitem",
		components: {
			f2bpmButton,
			f2bpmCascselect,
			f2bpmCheckbox,
			f2bpmDatetime,
			f2bpmFile,
			f2bpmHandsign,
			f2bpmHyperlink,
			f2bpmPicture,
			f2bpmRadio,
			f2bpmRicheditor,
			f2bpmSelect,
			f2bpmSelector,
			f2bpmSerialnum,
			f2bpmStamp,
			f2bpmLabel,
			f2bpmTextbox,
			f2bpmAutocompleter,
			f2bpmCustomdialog,
			f2bpmDroptree,
			f2bpmMapAddress,
			f2bpmMobilesubtable,
			f2bpmSteps,
			f2bpmSwitch,
			f2bpmQrcode
		},
		props: ['field', 'fieldvalue', 'parentdata','rowindex','colindex'],
		watch: {
			parentdata: {
				handler(n, o) {},
				deep: true,
				immediate: true,
			}
		},
		mounted() {
			var that = this;
		},
		created: function() {
			var that = this;
			that.subtableKey = Object.toGetRandomNum(100, 2000);
			//JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，
			// 在子组件内部改变它会影响父组件的状态,所以它data的变化会直接影响到父组件的data
			if (that.parentdata != undefined) {
				that.data = that.parentdata;
			}
		},
		data: function() {
			return {
				//子表组件的Key
				subtableKey: "101",
				//字段定义
				fieldList: [],
				data: {}
			}
		},
		methods: {
			renderComponent(keyName) {
				var that = this;
				that.$emit('rendercomponent', keyName);
			}
			//field: 可以是字段名也可以是字段定义的对象
			,
			updateFieldValue(field, newValue, vueDataName, subVueDataName) {
				var isSubtable = false;
				//console.info("updateFieldValue");
				//更新自己控件值
				var that = this;
				var vueDataObj = vueDataName ? that[vueDataName] : that.data;
				if (subVueDataName) {
					vueDataObj = that[vueDataName][subVueDataName];
				}
				if (typeof field == "string") {
					vueDataObj[field] = newValue;
					isSubtable = field.split(".").length >= 3;
				} else if (typeof field == "object") {
					if (field.vModel) {
						vueDataObj[field.vModel] = newValue;
						isSubtable = field.vModel.split(".").length >= 3;
					} else if (field["field"]) {
						vueDataObj[field["field"]] = newValue;
					}
				}
				that.excuteRowMath();
				//由于data是引用了父组件的对象，所以是地址引用，所以不需要再次向上触发更新
				//that.$emit('updatevalue', field, newValue, vueDataName, subVueDataName);

			},
			appendFieldValue(fieldName, newValue, vueDataName, subVueDataName) {
				console.info("appendFieldValue");
				//追加值到指定字段
				var that = this;
				var vueDataObj = vueDataName ? that[vueDataName] : that.data;
				if (subVueDataName) {
					vueDataObj = that[vueDataName][subVueDataName];
				}
				var oleValue = vueDataObj[fieldName] || "";
				if (oleValue) {
					vueDataObj[fieldName] = oleValue + "," + newValue;
				}
				vueDataObj[fieldName] = newValue;
				// that.$emit('appendfieldvalue',fieldName, newValue, vueDataName,subVueDataName);
			},
			excuteRowMath() {
				var that = this;
				//第一次页面加载时不触发执行
				if (!f2grid_global_mainVueLoadComplated) {
					return false;
				}
				//检查我的变化是否要触发行内公式计算
				// 只有 输入框、下拉框、选择器，自定义选择器，日期才会有公式计算，才需要去判断触发公式
				if (that.field.ctrType != "text" && that.field.ctrType != "select" && that.field.ctrType != "selector" &&
					that.field
					.ctrType != "customdialog" && that.field.ctrType != "datetime") {
					return false;
				}
				//console.info("触发公式判断:"+that.field.vModel)
				var isCanMath = FUI.F2Grid.checkMyChangeIsNeedToExcuteMath(that.field.vModel);
				if (isCanMath) {
					console.info("【执行公式】:" + that.field.fieldTitle)
					//因为公式字段会被链条式的使用，所以需要触发所有公式进行计算
					FUI.F2Grid.excuteAllMath(that.field.vModel, that.data);
				}
			}
		}
	};
</script>
